import React from "react";
import Footer from "../../components/common/footer/index";
import { connect } from "react-redux";
import { Carousel } from "antd-mobile";
import { NavLink } from "react-router-dom";
import { getBanner } from "../../api";
import { getUserInfo } from "../../store/actions";

import { IndexHead, Logo, Search, Login, Banner, Catalog } from "./style";
import NewList from "../../components/common/newList";

class Index extends React.PureComponent {
  state = {
    data: [],
    page: 1,
    listData: [],
    keywords: ''
  };

  componentDidMount() {
    getBanner().then(res => {
      this.setState({
        data: res.data.data
      });
    });
  }
  goLogin(){
    // if (!this.props.userInfo) {
    //   window.location.href = 'http://www.yermn.com/api/auth/login?url=http://www.yermn.com/me'
    // }
  }
  goSeach(e){
    console.log(e.keyCode)
    if (e.keyCode === 13 && this.state.keywords) {
      this.props.history.push("/search/" + encodeURI(this.state.keywords));
    }
  }
  inputFn(e){
    this.setState({
      keywords: e.target.value
    })
  }
  render() {
    return (
      <div>
        <IndexHead>
          <Logo src={require("../../assets/logo.jpg")} />
          <Search>
            <i className="iconfont">&#xe6df;</i>
            <input type="text" value={this.state.keywords} onKeyDown={this.goSeach.bind(this)} onChange={this.inputFn.bind(this)} placeholder="请输入关键字"/> 
          </Search>
          <Login onClick={this.goLogin.bind(this)}>
            <i className="iconfont">&#xe63a;</i>
            {this.props.userInfo ? this.props.userInfo.nickname : "登录"}
          </Login>
        </IndexHead>

        <Banner>
          <Carousel
            autoplay={false}
            infinite
            dotStyle={{
              background: "none",
              borderRadius: "50%",
              border: "1px solid #c29c5d",
              boxSizing: "border-box"
            }}
            dotActiveStyle={{ background: "#c29c5d" }}
          >
            {this.state.data.map((val, i) => (
              <a key={i} href={val.linkuri} style={{ display: 'inline-block', width: '100%', height: "5.2rem" }}>
                <img
                  src={val.thumb}
                  alt={val.title}
                  onLoad={event => {
                    // fire window resize event to change height
                    event.preventDefault();
                    window.dispatchEvent(new Event("resize"));
                    this.setState({ imgHeight: "auto" });
                  }}
                />
              </a>
            ))}
          </Carousel>
        </Banner>

        <Catalog>
          <a href="https://a4.buhaoting.cn/app/index.php?i=141&c=entry&m=ewei_shopv2&do=mobile">
            <i className="iconfont">&#xe6b3;</i> <span>商城</span>
          </a>
          <NavLink to="/clock">
            <i className="iconfont">&#xe624;</i> <span>打卡</span>
          </NavLink>
          <NavLink to="/learn">
            <i className="iconfont">&#xe603;</i> <span>学习</span>
          </NavLink>
          <NavLink to="/learn?type=1">
            <i className="iconfont">&#xe67a;</i> <span>答题</span>
          </NavLink>
        </Catalog>
        <NewList data={this.state.listData} />
        <Footer atthis="home" />
      </div>
    );
  }
}
const mapStateToProps = state => ({
  userInfo: state.userInfo
});
const mapDispatchToProps = dispatch => ({
  login: (openId) => dispatch(getUserInfo(openId))
});
export default connect(mapStateToProps, mapDispatchToProps)(Index);
